<template>
	<!-- 提现 -->
	<view>
		<view class="widthdraw_num">
		    <view>提现金额</view>
			<input class="inputnum" v-model="formData.amount" placeholder="请输入金额" />
		</view>
		<view class="pay" @click="payFn">支付</view>
	</view>
	<uni-popup ref="popup" type="bottom"  >
	     <view class="popup">
				<view class="main_content">
					<view class="content_num">
						<view
							v-for="item in pwdLen"
							:key="item"
							class="content_item"
						>
							{{ password[item - 1] ? '●' :  '' }}
						</view>
					</view>
				</view>
				
				 <view class="main_keyboard">
				            <view
				                v-for="item in numberLen"
				                :key="item"
				                class="key_num"
				                @tap="inputNumFun({ num: item })"
				            >
				                {{ item }}
				            </view>
				            <view class="key_null" />
				            <view
				                class="key_0"
				                @tap="inputNumFun({ num: 0 })"
				            >
				                0
				            </view>
				            <view
				                class="key_del"
				                @tap="delNumFun"
				            >
				               <image
									  src="/static/delete.png"
									  mode="aspectFill"
								  />
				            </view>
				        </view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { computed ,ref,reactive,toRefs} from 'vue';
	import { onLoad,onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	const numberLen=ref(9)
	const pwdLen=ref(6)
	const popup=ref(null)
	
	const formData=ref({
		amount:'',
		paymentPassword:''
	})
	
	
	const state=reactive({
		password:[]
	})
	
	const {password}=toRefs(state)
	const payFn=()=>{
		console.log('12');
		popup.value.open()
	}
	
	const closeFn=()=>{
		popup.value.close()
	}
	//点击输入密码
	const inputNumFun=(op)=>{
		// console.log(op);
		if(password.value.length<5){
			password.value.push(op.num);
		}else if( password.value.length ==5){
			// console.log( password.value.length);
			password.value.push(op.num);
			submitFn()
		}
		// console.log(password.value);
	}
	//删除密码
	const delNumFun=()=>{
		 if (password.value.length == 0) return;
		 	console.log(  password.value);
			password.value.splice( password.value.length - 1,1  );
			console.log(  password.value);
	
	}
	
	const submitFn=()=>{
		// console.log('submitFn');
		// console.log(password.value.join(''));
		formData.value.paymentPassword=password.value.join('')
		// console.log(formData.value);
		console.log(formData.value);
		const szWithdrawalBalance=sheep.$store('user').userInfo.szWithdrawalBalance
		if(formData.value.amount > szWithdrawalBalance){
			uni.showToast({
				title:'当前可提现金额不足',
				icon:"none"
			})
			password.value=[]
			return false
		}
		
		sheep.$api.login.withdrawal(formData.value).then(res=>{
			console.log(res);
			if(res.code==200){
				password.value=[]
				uni.showToast({
					title:'操作成功!'
				})
				
				closeFn()
				setTimeout(()=>{
					sheep.$store('user').getUserInfo()
					uni.navigateBack({delta:1})
				},1000)
			}else if(res.code==500){
					password.value=[]
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	page{
		padding-top: 200rpx;
	}
	.widthdraw_num{
		display:flex;
		align-items: center;
		background-color: #fff;
		margin: 30rpx;
		padding: 50rpx 30rpx;
		
	}
	.inputnum{
		margin-left: 30rpx;
		border-bottom:2rpx solid #eee;
		padding:10rpx ;
	}
	.pay{
		text-align: center;
		padding:24rpx;
		background-image: linear-gradient(90deg,#f7a7ba,#f8bfce,#f8d0d9);
		margin: 100rpx  30rpx;
		border-radius: 15rpx;
		font-weight: 700;
		font-size: 30rpx;
		color: #fff;
	}
	
	.popup{
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		padding:20rpx 30rpx;
	}
	 .main_content {
	        padding: 20rpx 100rpx;
	        .content_num {
	            display: flex;
	            align-items: center;
	            justify-content: space-between;
	            .content_item {
	                width: 75rpx;
	                height: 75rpx;
	                background-color: #f0f0f0;
	                border-radius: 16rpx;
	                display: flex;
	                justify-content: center;
	                align-items: center;
	            }
	        }
	        // .error_text {
	        //     font-size: 24rpx;
	        //     color: $u-error;
	        //     text-align: center;
	        //     margin-top: 20rpx;
	        // }
	    }
	.main_keyboard {
	        height: 500rpx;
	        display: flex;
	        flex-flow: wrap;
	        .key_null,
	        .key_del {
	            background: #ededed;
	        }
	        image {
	            width: 40rpx;
	            height: 30rpx;
	        }
	        .key_num,
	        .key_null,
	        .key_del,
	        .key_0 {
	            width: 33%;
	            height: 125rpx;
	            display: flex;
	            align-items: center;
	            justify-content: center;
	        }
	        .key_num {
	            border-right: 2rpx solid #f1f4f4;
	            border-bottom: 2rpx solid #f1f4f4;
	            border-top: 2rpx solid #f1f4f4;
	            &:nth-child(n + 4) {
	                border-top: none;
	            }
	            &:nth-child(n + 7) {
	                border-bottom: none;
	            }
	        }
	        .key_0 {
	            border-top: 2rpx solid #f1f4f4;
	        }
	    }
	
</style>